搞完 Hyperframes 我才发现，口播视频根本不用自己做
搞完 Hyperframes 我才发现，口播视频根本不用自己做
来源：htmlDecode("林月半子的AI笔记")
原文链接：https://mp.weixin.qq.com/s/2G0kdnf4vsiE0hkj7H7yaA
关注 「 ** 林月半子的AI笔记 ** 」 ， 设为 「 ** 星标 ** 」 我是林月半子， 教你用AI干掉90%的重复劳动 ** ！ **
说出来大家可能不信，我其实也是一位视频博主，但是我做视频太慢了，剪一个视频要花掉我半天时间。
所以我一直在佛系更新。
我很羡慕那些剪辑很厉害的 AI 博主，既能够稳定的剪视频，而且流量又这么好。
最近 Hyperframes 是真的火了，公众号和 X 上隔三差五就能刷到。这是 HeyGen 开源的一个框架，一句话概括： 用写网页的方式做视频特效，然后一行命令渲染成 MP4。
HTML 导出视频这事不新鲜，很早就有人做过。但 Hyperframes 让人兴奋的地方在于： 它把视频制作变成了 AI 能干的活。 整个流程——写模板、填内容、校验、渲染——每一步都是结构化的，AI Agent 能看懂、能执行、能自己检查有没有出错。
它是一个 AI 友好的视频工作流。
我忍不住也试了一下，给自己做了一个口播视频，效果是这样的：
左边是动态的文字动效和代码块展示，右边是我在讲解，背景是深色科技风。整个效果不靠剪辑软件，全是代码生成的。
看到这你可能会问：这玩意儿到底怎么用？
别急，我一步步带你跑通。
先把环境搞定
在开始做任何花活之前，先确保你的机器能跑 Hyperframes。
前置条件就两个：Node.js >= 22，FFmpeg 装好。
然后装 Hyperframes 的 skill：
npx skills add heygen-com/hyperframes
💡
这一步别跳过。装完之后，Claude Code 就"学会了" Hyperframes 的所有规则——怎么写合成模板、怎么注册动画时间线、哪些 data 属性是必须的——你后面直接用 /hyperframes 指令跟它对话就行。
顺带一提，这个 skill 不只支持 Claude Code，其他 Agent 比如龙虾，Hermes 这些也都能用，本文以 Claude Code 为例，你用其他工具的话流程是一样的。
接下来验证环境，把这段丢给 Claude Code：
检查一下环境：Node.js >= 22、FFmpeg 是否可用。 然后初始化一个 Hyperframes 项目，项目名 my-first-video，1920x1080，30fps，使用 X Post Card 示例模板。 用这个示例跑一次 preview 和 render，确认能输出 mp4。 最后告诉我：环境是否通过、项目是否初始化完成、render 是否跑通。 先不要做任何自定义效果。
就这么几行，Claude Code 会自己规划执行顺序：检查环境 → 初始化项目 → 跑预览 → 渲染输出。
而且不用担心缺东西。比如你没装 FFmpeg，Claude Code 检查到之后会自己帮你装，不需要你手动去折腾。
如果一切顺利，你会看到一个默认的 MP4 文件被输出到项目目录里。
搞定这步就成功一半了。
第一步：先做一个不露脸的版本
别急着上口播。我第一次做的时候，其实也没用自己的形象，用的是 MiniMax 的语音合成。
为什么？因为我想先验证一件事： Hyperframes 到底好不好用，值不值得深入。
先看看不露脸的版本长什么样：
提示词很简单，就是一段文案脚本，丢给 Claude Code 就行。这段提示词来自 @VersunPan 的分享
使用下面的脚本，制作一个小红书视频：
第一次用 Hermes，别急着研究高级玩法。
先把这几个命令跑一遍，熟悉基本手感。
第一个，hermes。
终端里敲这个，直接进对话模式。
相当于在终端里叫醒你的 AI 助手。
有问题直接聊，不用绕。
第二个，hermes dashboard。
打开可视化面板。
不想一直盯着黑窗口，这个更直观。
第三个，hermes -z。
一次性任务模式。
查个东西、改个文件、跑个脚本，不想进长对话，就用它。
适合自动化，也适合临时丢一个明确任务过去。
第四个，hermes -c。
继续上一次对话。
不用重新解释背景，不用从头铺垫。
做连续项目的时候，这个命令很省时间。
第五个，hermes status。
出问题了，先看状态。
别靠玄学猜，也别第一反应就重装。
先看看 Hermes 现在到底什么情况。
第六个，hermes doctor。
听名字就知道干嘛的。
检查环境和配置有没有问题。
新手遇到奇怪报错，先跑这个，别急着怀疑人生。
第七个，hermes model。
切换模型和 provider。
不同任务用不同脑子。
写作、编程、搜索、自动化，不一定都适合同一个模型。
第八个，hermes config edit。
改配置。
但新手别乱改。
改之前先备份，不然你很快就会认识什么叫"自找麻烦"。
第九个，hermes logs errors。
看错误日志。
日志通常比你的直觉诚实。
你觉得是玄学，日志可能已经把原因写得明明白白了。
所以第一次用 Hermes，先把这九个跑熟。
这些会了，你才算真的开始会用 Hermes。
不然只是打开了它，还没掌控它。
你看，就这么一段文案丢给 Claude Code，它不会直接闷头开干，而是会先问你几个问题：
画面比例选竖屏还是横屏？视觉风格要暗色科技风还是其他？每个命令场景要不要展示终端窗口样式？
全部选完确认之后，它才开始正式干活。
它会一步步引导你做选择，而不是让你一次性写一大堆参数。选完之后，Hyperframes 会自动帮你把每个命令做成一个场景卡片，配上动态文字效果，再合上 MiniMax 生成的语音，直接渲染成视频。
不需要剪辑软件，不需要自己对时间轴。
💡
Hyperframes 的核心逻辑是这样的：你的视频画面其实就是一个网页。你在 HTML 里写好布局、动效、文字，然后 Hyperframes 帮你把这个"网页"一帧一帧截图，最后拼成视频。所以你在网页里能做的事情，视频里都能做。
第二步：加上口播，效果直接起飞
非口播版本验证完了，我就开始整口播版了。
这次我用的是自己的数字人素材——已经有一段录好的口播视频了，带原声的。
但是原始素材肯定不完美。数字人生成的视频里会有气口、莫名其妙的停顿。这些问题不处理，后面做出来的视频节奏会很拖。
所以第一件事是让 Claude Code 帮你把素材剪干净：
帮我把这段口播视频剪干净：~/Downloads/b9da099.thumbnail.mp4
- 剪掉所有静音、气口和空白片段
- 自动转录，生成带时间戳的字幕文件
- 如果有重复说的内容，用 "最后一遍原则" ——保留最后一次，剪掉前面的
- 为我构建一个 HTML 页面，并排展示处理前后的脚本对比，确认后再输出最终素材
这段提示词干了四件事：静音剪切、自动转录、重复内容去重、生成对比让你确认。
素材准备好了，接下来就简单了。用剪辑后的视频和字幕文件，直接做口播叠特效： 人物放右边，内容放左边，宽屏 16:9，音频用视频里的原声。
提示词也很直接：
调整为 16:9 宽屏视频。
口播视频素材用剪辑后的版本：edit-workspace/edited_output.mp4
字幕文件：edit-workspace/output.srt
视频里已经有声音了，不需要额外生成语音。
布局：人物放右侧，内容展示放左侧。
视觉风格：暗色科技风。
脚本内容不变，用之前那份。
和第一步的区别就三点：尺寸从竖屏换成了 16:9 宽屏，指定了口播视频文件路径，明确告诉它用视频原声不要另外生成。
Claude Code 拿到之后，会自动把你的口播视频嵌入右侧，左侧按脚本内容生成动态文字和终端窗口效果，音频直接用视频里的原声。
当然，第一版出来肯定不会完美。可能文字位置不对，可能动效节奏和口播对不上，也没有 Hermes 的 Logo。
没关系， 直接口喷让它改就行。
💡
小技巧：调试阶段别让它每次都渲染成 MP4，渲染很慢。让它只跑 preview，在浏览器里实时看效果就行。等所有细节都满意了，最后再渲染一次出片。这样能省很多时间。
来回调了几轮之后，效果就是文章开头你看到的那个。
你可能觉得我做的这个效果一般。
没关系，视频好不好看这事跟审美有关，每个人风格不一样，多试试就能找到自己的调。
Hyperframes 核心命令
本文全程用 Claude Code 操作，它会自动帮你跑这些命令。但如果你想脱离 Claude Code 自己手动操作，核心就三个：
# 校验：检查模板有没有写错
npx hyperframes lint
# 预览：在浏览器里实时查看效果
npx hyperframes preview
# 渲染：输出最终的 MP4 文件
npx hyperframes render
顺序是 lint → preview → render。先检查、再看效果、最后出片。
写在最后
回到开头那个问题：怎么让剪视频不再那么痛苦？
我的答案是： 把视频特效变成代码问题。
代码的好处是什么？可复用。你做好一套口播模板，以后每次录完口播，换个视频文件，改改文字，渲染一下就完事了。不用每次都从零开始在剪映里拖来拖去。
代码还有个好处： AI 能介入。 今天口播叠特效，过一阵子可能就是 AI 根据你的文章直接出视频，或者根据数据变化自动更新可视化。
你想象一下：用户说一句"帮我把这篇文章生成视频" → AI Agent 拆解需求，生成 Hyperframes 指令 → 自动编写 HTML + 动效 → 渲染输出 MP4 → 推送到社交媒体。
这条链路里，唯一还需要解决的，就是 第一步到第二步 ——怎么让 AI 把一句模糊的需求翻译成结构化的视频指令。后面的编写、渲染、输出、分发，全是确定性流程，不需要人介入。
Hyperframes 恰好把后半段标准化了，AI Agent 只需要搞定"理解需求"这一步。它让 AI 用得上，所以我说它是一个 AI 友好的视频工作流 。
后续我会继续探索 Hyperframes 的更多玩法。
如果觉得不错，随手点个「赞」和「在看」，转发给需要的朋友吧～ 第一时间收到推送，记得给我个星标⭐